<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table{
				margin-top:20px;
				border:1px solid red;
				border-collapse: collapse;
			}
			td{
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div id="app">

		    <table>
		        <tr>
		            <th colspan="3">父组件数据</td>
		        </tr>
		        <tr>
		            <td>name</td>
		            <td>{{ name }}</td>
		            <td><input type="text" v-model="name" /></td>
		        </tr>
		        <tr>
		            <td>age</td>
		            <td>{{ age }}</td>
		            <td><input type="text" v-model="age" /></td>
		        </tr>
		    </table>
		
		    <my-component v-bind:my-name="name" v-bind:my-age="age"></my-component>
		</div>
		
		<template id="myComponent">
		    <table>
		        <tr>
		            <th colspan="3">子组件数据</td>
		        </tr>
		        <tr>
		            <td>my name</td>
		            <td>{{ myName }}</td>
		            <td><input type="text" v-model="myName" /></td>
		        </tr>
		        <tr>
		            <td>my age</td>
		            <td>{{ myAge }}</td>
		            <td><input type="text" v-model="myAge" /></td>
		        </tr>
		    </table>
		</template>
	</body>
	<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	/*prop默认是单向绑定：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意修改了父组件的状态
	 */
		var vm = new Vue({
			el:"#app",
			data:{
				name:'keepFool',
				age:'28',
			},
			components:{
				'my-component':{
					template:'#myComponent',
					props:['myName','myAge']
				}
			}
		})
	</script>
</html>
